<!DOCTYPE html>
<#assign ctx=Session.basePath>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>船E行</title>
    <script>
        var basePath = '${ctx}';
        var company =  '<#if company??>${company}<#else></#if>';
    </script>
<#--<#include "../../include/include.ftl">-->
    <link href="${ctx}/map/js/ol2/theme/default/style.css" rel="stylesheet" />
    <link href="${ctx}/map/css/index.css" rel="stylesheet" />
    <script src="${ctx}/map/js/jquery-1.11.3.min.js"></script>
    <script src="${ctx}/map/js/screen.js"></script>
    <#--<script src="${ctx}/map/js/ol2/OpenLayers.js"></script>-->
    <#--<script src="${ctx}/map/js/ol2/Olinit.js"></script>-->
    <script src="${ctx}/js/map.js"></script>
    <#--<script src="${ctx}/map/js/tool.js"></script>-->
    <#--<script src="${ctx}/map/js/tool.js"></script>-->
    <script src="${ctx}/pagination/js/layer/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="${ctx}/inspiniain/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/inspiniain/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/js/openlayer/ol.css" />
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/css/index.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/CYXMAP/js/openlayer/plugin/layerswitcher/ol3-layerswitcher.css">
    <script type="text/javascript" src="${ctx}/inspiniain/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/openlayer/ol-debug.js" ></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/index.js"></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/layer/layer.js"></script>
    <script type="text/javascript" src="${ctx}/CYXMAP/js/openlayer/plugin/layerswitcher/ol3-layerswitcher.js"></script>
    <script src="${ctx}/laydate/laydate.js"></script>
</head>
<body>
<style>
    .tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;!important;
        white-space: nowrap;
    }
    .tooltip-measure {
        opacity: 1;
        font-weight: bold;
    }
    .tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
    }
    .tooltip-measure:before,
    .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
    }
    .tooltip-static:before {
        border-top-color: #ffcc33;
    }
    .tooltip .close {
        width: 20px;
        height: 20px;
        position: absolute;
        text-align: center;
        line-height: 20px;
        opacity: 0.5;
        top: 1px;
        right: -22px;
        background-color: #FFFFFF;
        cursor: pointer;
    }
    .tooltip .close:hover{
        background-color: palevioletred;
    }
</style>
<#--<div class="menu">-->
    <#--<ul>-->
        <#--<li>-->
            <#--<a href="#" id="touchLine">报告记录</a>-->
        <#--</li>-->
        <#--<li><a href="#" id="voyage">航次报告</a></li>-->
        <#--<li><a href="#" id="accident">险情报告</a></li>-->
        <#--<li><a href="#" id="message">发布消息</a></li>-->
        <#--<li><a href="#" id="fleet">船队管理</a></li>-->
        <#--<li><a href="#" id="shipserver">服务信息查询</a></li>-->
    <#--</ul>-->

    <#--<div class="ol-unselectable ol-control">-->
        <#--<button type="button" onclick="addMap(118.6608,32.0041);"></button>-->
    <#--</div>-->
    <#--<div id="one-map" class="ol-unselectable ol-control switch-map">-->
        <#--<button type="button" onclick="oneMap();" style="background-color: orange">1</button>-->
    <#--</div>-->
    <#--<div id="two-map" class="ol-unselectable ol-control switch-map" >-->
        <#--<button type="button" onclick="twoMap();">2</button>-->
    <#--</div>-->
    <#--<div id="four-map" class="ol-unselectable ol-control switch-map">-->
        <#--<button type="button" onclick="fourMap();">4</button>-->
    <#--</div>-->

    <#--<div id="stop-watch" class="ol-unselectable ol-control">-->
        <#--<button type="button" onclick="stopWatch();" >S</button>-->
    <#--</div>-->
<#--</div>-->
<div id="search">
    <div id="search-position">
        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" id="exampleInputAmount" placeholder="查询船舶、MMSI、服务点或者码头" style="width: 300px" oninput="getSearch();">
                    <div class="input-group-addon" style="background-color: white;width: 20px;cursor: pointer;padding: 6px 10px" onclick="showPath()" title="路线"><i class="fa fa-exchange" style="color: #0d8ddb"></i></div>
                    <div class="input-group-addon" style="cursor: pointer" onclick="getSearch()"  title="搜索"><i class="fa fa-search"></i></div>
                </div>
            </div>
        </form>
    </div>
    <div id="search-path">
        <form class="form-inline">
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-control" id="startInput" placeholder="在地图上选取起点" style="width: 300px"  onfocus="setStart();">
                    <div class="input-group-addon" style="background-color: white;width: 26px;cursor: pointer;padding: 6px 12px" onclick="closePath()" title="关闭路线"><i class="fa fa-close" style="color: darkgrey"></i></div>
                    <div class="input-group-addon" style="cursor: pointer" onclick="getSearch()"  title="搜索"><i class="fa fa-search"></i></div>
                </div>
            </div>
        </form>
        <form class="form-inline">
            <div class="form-group">
                    <input type="text" class="form-control"  id="endInput" placeholder="在地图上选取终点" style="width: 300px;float: left"  onfocus="setEnd();">
                    <select class="form-control"  style="float: left;" id="dir">
                        <option value="U">上行</option>
                        <option value="D">下行</option>
                    </select>
            </div>
        </form>


    </div>
    <div id="search-content">
        <ul>
        </ul>
    </div>
</div>
<div id="tool-bar">
    <div  id="switch-btn"  class="ol-unselectable ol-control tool-button">
        <button  title="窗口切换" style="width: 80px;"><span>窗口切换</span></button>
    </div>
    <div id="switch-panel">
        <label style="margin-left: 10px;font-size: 14px;font-weight: bold">窗口切换：</label>
        <ul>
            <li><input type="radio" id="one-map" name="switch" value="one" onclick="oneMap();" checked>单窗口</li>
            <li><input type="radio" id="two-map"  name="switch" value="two" onclick="twoMap();">双窗口</li>
            <li><input type="radio" id="four-map"  name="switch"  value="four" onclick="fourMap();">四窗口</li>
        </ul>
    </div>
    <div id="stop-watch" class="ol-unselectable tool-button ol-control ">
        <button type="button" onclick="stopWatch();" title="停止跟踪" style="width:80px;" ><i class="fa fa-remove"></i>&nbsp;<span>停止跟踪</span></button>
    </div>
    <div  id="fleet" class="ol-selectable ol-control tool-button">
        <button type="button"   title="关注船舶" style="width:80px"><i class="fa fa-camera-retro"></i>&nbsp;<span>关注船舶</span></button>
    </div>
    <div  id="company-warning" class="ol-selectable ol-control tool-button">
        <button type="button"   title="告警信息" style="width:80px"><i class="fa fa-warning"></i>&nbsp;<span>告警信息</span></button>
    </div>
    <div id="point-button" class="ol-unselectable ol-control  tool-button draw-button">
        <button  type="button"  onclick="drawPoints();" title="绘点" style="width:80px"><i class="fa fa-pencil"></i><span>&nbsp;&nbsp;绘&nbsp;点</span></button>
    </div>
    <div id="line-button" class="ol-unselectable ol-control tool-button draw-button">
        <button type="button"  onclick="drawLines()" title="绘线" style="width:80px"><i class="fa fa-pencil-square-o"></i><span>&nbsp;&nbsp;绘&nbsp;线</span></button>
    </div>
    <div id="polygon-button" class="ol-unselectable ol-control  tool-button draw-button">
        <button type="button"  onclick="drawPolygons();" title="绘面" style="width:80px" ><i class="fa fa-pencil-square"></i><span>&nbsp;&nbsp;绘&nbsp;面</span></button>
    </div>
    <div id="measure-length" class="ol-unselectable ol-control  tool-button draw-button">
        <button type="button"  onclick="measureLength();" title="测距" style="width:80px" ><image src="${ctx}/images/ico_cj.png"  height="16px" width="16p"></image><span>&nbsp;&nbsp;测&nbsp;距</span></button>
    </div>
    <div id="measure-area" class="ol-unselectable ol-control  tool-button draw-button">
        <button type="button"  onclick="measureArea();" title="测面" style="width:80px" ><image src="${ctx}/images/ico_cm.png" height="16px" width="16p"></image><span>&nbsp;&nbsp;测&nbsp;面</span></button>
    </div>
    <div id="none-button" class="ol-selectable ol-control tool-button draw-button">
        <button style="background-color: orange;width:80px" type="button"  onclick="drawNone();" title="漫游"><i class="fa fa-hand-o-up"></i><span>&nbsp;&nbsp;漫&nbsp;游</span></button>
    </div>
</div>
<div id="frame">
    <div id="map1" class="map">
        <div  class="mouse-position" id="mouse-position1">
        </div>
        <div id="track-ship1" class="track-ship"></div>
    </div>
    <div id="popup1" class="ol-popup">
        <a href="#" id="popup-closer1" class="ol-popup-closer"></a>
        <div id="popup-content1" style="width: 150px;word-break: break-all"></div>
    </div>
    <div id="map2" class="map">
        <div  class="mouse-position" id="mouse-position2">
        </div>
        <div id="track-ship2" class="track-ship"></div>
    </div>
    <div id="popup2" class="ol-popup">
        <a href="#" id="popup-closer2" class="ol-popup-closer"></a>
        <div id="popup-content2" style="width: 150px;word-break: break-all"></div>
    </div>
    <div id="map3" class="map">
        <div  class="mouse-position" id="mouse-position3">
        </div>
        <div id="track-ship3" class="track-ship"></div>
    </div>
    <div id="popup3" class="ol-popup">
        <a href="#" id="popup-closer3" class="ol-popup-closer"></a>
        <div id="popup-content3" style="width: 150px;word-break: break-all"></div>
    </div>
    <div id="map4" class="map">
        <div class="mouse-position" id="mouse-position4">
        </div>
        <div id="track-ship4" class="track-ship"></div>
    </div>
    <div id="popup4" class="ol-popup">
        <a href="#" id="popup-closer4" class="ol-popup-closer"></a>
        <div id="popup-content4" style="width: 150px;word-break: break-all"></div>
    </div>
</div>





<script src="${ctx}/CYXMAP/js/olutil.js"></script>
<script type="text/javascript">
    window.onresize = reload;
    $(document).ready(function() {
        initMap('map1','mouse-position1','popup1');
        initMap('map2','mouse-position2','popup2');
        initMap('map3','mouse-position3','popup3');
        initMap('map4','mouse-position4','popup4');
        oneMap();
        setTimeout(getAis, 5000);
    });
//    console.log(new Date().toUTCString());
</script>

<script type="text/javascript">
    var features = new ol.Collection();
    var source = new ol.source.Vector({features: features});
    var draw; // global so we can remove it later
    var vector = new ol.layer.Vector({
        title:"告警绘图",
        source: source,
        zIndex:1,
        style: new ol.style.Style({
//            fill: new ol.style.Fill({
//                color: 'white'
//            }),
            stroke: new ol.style.Stroke({
                color: '#00FF00',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#FF5500'
                }),
                stroke: new ol.style.Stroke({
                    color: '#00FF00',
                    width: 2
                })
            })
        })
    });


    var typeSelect='None';
    function drawPoints(){
        typeSelect='Point';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawLines(){
        typeSelect='LineString';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawPolygons(){
        typeSelect='Polygon';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawCircles(){
        typeSelect='Circle';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        ol.Observable.unByKey(l);
        addInteraction();
    }
    function  drawNone(){
        typeSelect='None';
        mapArray[0].map.removeInteraction(draw);
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.addInteraction(mapArray[0].select);
        ol.Observable.unByKey(mapArray[0].listener);
        addEvent(mapArray[0]);
//        sourceMeasure.clear();
//        mapArray[0].map.getOverlays().clear();
//        mapArray[0].map.addOverlay(mapArray[0].overlay);
        ol.Observable.unByKey(l);
    }
   function measureLength() {
       typeSelect='LineString';
       mapArray[0].map.removeInteraction(mapArray[0].select);
       mapArray[0].map.removeInteraction(draw);
       ol.Observable.unByKey(mapArray[0].listener);
       addMeasureInteraction();
   }
    function measureArea() {
        typeSelect='Polygon';
        mapArray[0].map.removeInteraction(mapArray[0].select);
        mapArray[0].map.removeInteraction(draw);
        ol.Observable.unByKey(mapArray[0].listener);
        addMeasureInteraction();
    }


    function addInteraction() {
        var value = typeSelect;
        if (value !== 'None') {
            draw = new ol.interaction.Draw({
                source:  source,
                type: /** @type {ol.geom.GeometryType} */ (typeSelect),
                style: new ol.style.Style({
//                    fill: new ol.style.Fill({
//                        color: 'rgba(255, 255, 255, 0.2)'
//                    }),
                    stroke: new ol.style.Stroke({
                        color: 'rgba(0, 0, 0, 0.5)',
                        width: 2
                    }),
                    image: new ol.style.Circle({
                        radius: 5,
                        stroke: new ol.style.Stroke({
                            color: 'rgba(0, 0, 0, 0.7)'
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.2)'
                        })
                    })
                })

            });
            mapArray[0].map.addInteraction(draw);
            drawEnd(draw,mapArray[0]);
        }
    }

    function remove()
    {
        var l=select.getFeatures().getLength();
        for (var x=0 ;x<l;x++) {
            for (var y=0;y<features.getLength();y++) {
                if(select.getFeatures().getArray()[0]==features.getArray()[y])
                {
                    select.getFeatures().removeAt(0);
                    features.remove(features.item(y));
                    break;
                }
            }
        }
    }


</script>
</body>
</html>
<script type="text/javascript">
    var loadlayer;
//    $(document).ajaxStart(function () {
//        loadlayer = layer.load(0, {
//            //offset: '200px'
//        });
//    });


    $(document).ajaxComplete(function (event, request, settings) {
        if (loadlayer != null) {
            layer.close(loadlayer);
        }
    });
    $(document).ajaxError(function () {
        if (loadlayer != null) {
            layer.close(loadlayer);
        }
    });

//    $(function () {
//        init();
//    })
    function showPath() {
        $("#search-position").hide();
        $("#search-content").hide();
        $("#search-path").show();
        $("#startInput")[0].focus();
    }

    function setStart() {
        model='start';
    }

    function setEnd() {
        model='end';
    }

    function closePath() {
        $("#search-path").hide();
        $("#search-content").hide();
        $("#search-position").show();
        $("#exampleInputAmount")[0].focus();
        model='';
        for(var a=0;a<mapArray.length;a++)
        {
            mapArray[a].pathSource.clear();
            mapArray[a].startFeature=null;
            mapArray[a].endFeature=null;
            mapArray[a].pathFeature=null;
            mapArray[a].startLonLat=null;
            mapArray[a].endLonLat=null;
            mapArray[a].measureTooltipElement.style.display = 'none';
            $("#startInput").val('');
            $("#endInput").val('');
        }

    }

    function locBoat(lon,lat) {
        if(lon!=''&&lat!='')
        {
            var mapObj;
            for(var a=0;a<mapArray.length;a++)
            {
                if(mapArray[a].target=="map"+selectedMapId)
                {
                    mapObj=mapArray[a];
                    break;
                }
            }
            var coordinate = new ol.proj.transform([parseFloat(lon),parseFloat(lat)], 'EPSG:4326', 'EPSG:3857');
            mapObj.view.setZoom(13);
            mapObj.view.setCenter(ol.proj.fromLonLat([parseFloat(lon),parseFloat(lat)]));
            mapObj.map.setView(mapObj.view);
           setTimeout(_createRed(coordinate,mapObj),50);
        }
    }

    function locQuay(lon,lat,name) {
        if(lon!=''&&lat!='')
        {
            var mapObj;
            for(var a=0;a<mapArray.length;a++)
            {
                if(mapArray[a].target=="map"+selectedMapId)
                {
                    mapObj=mapArray[a];
                    break;
                }
            }
            $('#popup-content'+selectedMapId).html(name);
            var coordinate =[parseFloat(lon),parseFloat(lat)];
            mapObj.overlay.setPosition(coordinate);
            mapObj.view.setZoom(13);
            mapObj.view.setCenter(coordinate);
            mapObj.map.setView(mapObj.view);
        }
    }



    function locationMap(lon,lat,mmsi,shipname,course) {

            if(lon!=''&&lat!='')
            {
                var trackShip={
                    trackId:mmsi,
                    type:'ais'
                }
                locMap(lon,lat,trackShip,shipname,course);
            }
    }

    function getSearch() {
        var key=$('#exampleInputAmount').val();
        if(key!=="")
        {
            $.ajax({
                type: "POST",
                async:false,
                url: "/manage/map/company/search",
                data: {key:key},
                dataType: "json",
                success: function (data) {
                    var html="";
                    var record=data.list;

                    if(record.length==0)
                    {
                        html='未查询到相关信息';
                    }else {
                        for(var x in record)
                        {
                            var tempName=record[x].name;
                            if(record[x].name.length>15)
                            {
                                tempName=record[x].name.substring(0,15)+"...";
                            }
                            record[x].name=record[x].name.replace(/\'/g,"&acute;");
                            if(record[x].type=='server')
                            {
                                html+="<li><a href='#'  title='"+record[x].name+"' onclick='locServer(\""+record[x].spid+"\",\""+record[x].type+"\",\""+record[x].message+"\")'>"+tempName+"(服务点)</a></li>"
                            }else if(record[x].type=='quay')
                            {
                                if(record[x].wxp==0)
                                {
                                    record[x].wxp='一般码头';
                                }else {
                                    record[x].wxp='危险品码头';
                                }

                                var ff = new ol.format.WKT();
                                var f = ff.readFeature(record[x].geom,{
                                    dataProjection: 'EPSG:4326',
                                    featureProjection: 'EPSG:3857'
                                });

                                html+="<li><a href='#' title='"+record[x].name+"' onclick='locQuay(\""+f.getGeometry().flatCoordinates[0]+"\",\""+f.getGeometry().flatCoordinates[1]+"\",\""+record[x].name+"\")'>"+tempName+"("+record[x].wxp+")</a></li>"
                            } else {
                                if(record[x].name==null||record[x].name=='')
                                {
                                    record[x].name='暂无船名';
                                    tempName='暂无船名';
                                }
                                html+="<li><a style='width: 100px;overflow: auto' href='#' title='"+record[x].name+"' onclick='locBoat(\""+record[x].lon+"\",\""+record[x].lat+"\")'>"+tempName+"("+record[x].mmsi+")"+"</a>" +
                                        "<a><i  onclick='locationMap(\""+record[x].lon+"\",\""+record[x].lat+"\",\""+record[x].mmsi+"\",\""+record[x].name.replace(/\"/g,"\\\"")+"\",\""+record[x].course+"\")' class='fa-eye fa' style='float: right;font-size: 20px;color: black;cursor: pointer'></i></a></li>"
                            }
                        }
                    }
                    $('#search-content').show();
                    $('#search-content ul').html(html);
                }
            });
        }
    }
</script>


